<template>
  <div style="margin-top: 10px">
<el-table :data="shopCartList" stripe style="width: 100%" @selection-change="handleSelectionChange">
	<el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="商品图片">
        <template slot-scope="scope">
			<el-image :src="scope.row.product.productImage" style="width: 100px; height: 100px;" fit="contain">
			</el-image>
        </template>
      </el-table-column>
      <el-table-column prop="product.productName" label="商品名称"></el-table-column>
      <el-table-column prop="product.productPrice" label="商品单价"></el-table-column>
      <el-table-column prop="number" label="购买数量">
		<template slot-scope="scope">
			<el-input-number style="width: 120px;" v-model="scope.row.number" :min="1" :max="99"
			@change="changeCount(scope.row)"
			>
			</el-input-number>
		</template>
	  </el-table-column>
      <el-table-column prop="createTime" label="加入时间"></el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
         <el-button type="danger" icon="el-icon-minus" circle @click="del(scope.row)"> 
		  </el-button>
        </el-popconfirm>
		</template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px">
      <div style="display: flex; background-color: white; padding: 10px">
        <div style="flex: 1; padding-left: 20px; color: #999; font-size: 12px">
          <div>共 <span style="color: red; font-size: 20px">{{ number }}</span> 件商品</div>
        </div>
        <div style="flex: 1;color: red; text-align: right">
          <div>
            <span>总价：</span>
            <span>￥ {{ totalPrice }}</span>
            <el-button style="background-color: red; color: white; margin-left: 20px"
			@click="submitOrder(shopCartList, userNo, totalPrice)">去结算</el-button>
          </div>
        </div>
      </div>



    </div>
  </div>
</template>

<script>	
export default{
	name:"ShopCart",
	data(){
		return{
			userNo:this.$VuexStore.state.token.userNo,
			shopCartList:[],
			orderItemList: [],
			totalPrice: 0,
			number:0,
		}
	},
	created(){
		this.initShopCart();
	},
	methods:{
		initShopCart(){
			var url = "/api/shopCart/showUserCart/" + this.userNo;
			this.$Request
				.fetch_(url)
				.then((result) => {
					var newResult = result.data;
					this.shopCartList = newResult;
				})
				.catch((error) => {
					this.$message.error(error);
				});
		},
		//改变商品数量
		changeCount(obj){
			//console.log(obj);
			this.$Request
				.fetch_("/api/shopCart/addCart","put",obj)
				.then((result) => {
					this.$message.success(result.msg);
				})
				.catch((error) => {
					this.$message.error(error);
				});
				
				
		},
		//删除商品
		del(obj) {
			//console.log(obj);
			this.$Request
				.fetch_("/api/shopCart/deleteProduct","delete",obj)
				.then((result) => {
					this.$message.success(result.msg);
					this.initShopCart();
				})
				.catch((error) => {
					this.$message.error(error);
				});
		},
		//勾选
		handleSelectionChange(val){
			//this.multipleSelection = val;
			this.totalPrice = 0;
			this.number = 0;
			//进行价格计算
			if(val && val.length){
				val.forEach(item =>{
					this.totalPrice += item.number * item.product.productPrice,
					this.number += item.number
				})
			}
			this.totalPrice = this.totalPrice.toFixed(2);
			//console.log(this.totalPrice);
		},
		//结算
		submitOrder(shopList, userNo, totalPrice) {
			if(this.totalPrice == 0){
				this.$message.warning("请添加商品")
			}else{
			//console.log(shopList[0], userNo, totalPrice);
			for( var i = 0; i< shopList.length; i++) {
				var price = shopList[i].number * shopList[i].product.productPrice;
				this.orderItemList[i] = {
					productId: shopList[i].productId,
					productName: shopList[i].product.productName,
					productImage: shopList[i].product.productImage,
					price: shopList[i].product.productPrice,
					number: shopList[i].number,
					totalPrice: price,
				}
			}
			this.$Request
				.fetch_("/api/orders/addOrder/" + userNo+ "/" + totalPrice,"put", this.orderItemList)
				.then((result) => {
					this.$message.success(result.msg);
					this.initShopCart();
				})
				.catch((error) => {
					this.$message.error(error);
				});
				}
		},
	}
}	
</script>
